<style lang="scss">
.box {
  overflow: none;
}
.h_bottom {
  display: flex;
  width: 100%;
  .left {
    width: 90%;
    .nav {
      width: 100%;
      font-size: 16px;
      overflow: scroll;
      // 不换行
      white-space: nowrap;
      li {
        font-size: 16px;
        padding: 0 15px;
        height: 36px;
        line-height: 36px;
        display: inline-block;
        cursor: pointer;
        &.active {
          color: blue !important; // 添加蓝色高亮
        }
      }
    }
  }
  .right {
    flex: 1;
    padding-left: 10px;
    border-left: 2px solid #ccc;
  }
}
.listItem {
  width: 100%;
  margin-top: 4px;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
  border-bottom: 3px solid #ccc;
  .title {
    display: flex;
    justify-content: space-between;
    h3 {
      font-size: 16px;
      color: #333;
    }
    .HB {
      display: flex;
      justify-content: space-around;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
      }
      span {
        margin-left: 6px;
        font-size: 13px;
        color: #d92109;
      }
    }
  }

  .time {
    font-size: 10px;
    color: #333;
    margin: 10px 0 8px 0;
  }

  .detail {
    font-size: 12px;
    color: #333;
    line-height: 20px;
  }

  .collect {
    display: flex;
    justify-content: right;
    margin-top: 16px;
    font-size: 10px;
    color: #333;

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 14px;

      span {
        margin-left: 6px;
      }
    }
  }
}
</style>
<template>
  <div class="box">
    <header>
      <homeTop :userimg="true" :showSearch="false"></homeTop>
      <!-- <div class="div1">
        <van-icon class="icon1" name="manager" @click="onicon1" />
        <van-icon class="icon1" name="flower-o" />
      </div> -->
      <div class="h_bottom">
        <div class="left">
          <ul class="nav">
            <li
              v-for="(v, i) in gordlist"
              :key="i"
              :class="{ active: departmentId === v.id }"
              @click="handletab(v.id)"
            >
              {{ v.departmentName }}
            </li>
          </ul>
        </div>
        <div class="right">
          <span>
            <van-icon name="like-o" @click="search" />
          </span>
        </div>
      </div>
    </header>
    <div>
      <img
        src="../../assets/images/icon/common resource/hdpi/common_tab_circle_s.png"
        alt=""
        style="width: 50px; height: 50px; position: fixed; bottom: 20px; left: 43.5%; z-index: 999"
        @click="$router.push('/publishSickCircle')"
      />
    </div>
    <div>
      <virtual-list :size="itemSize" :remain="visibleItemCount">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
          <div v-for="(v, i) in listData" :key="i">
            <listItem :item="v" @todetail="todetail(v.sickCircleId)"></listItem>
          </div>
        </van-list>
      </virtual-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import listItem from '../../components/listItem/index.vue'
import { ref, onMounted } from 'vue'
import homeTop from '@/components/homeTop/index.vue'
import { useRouter } from 'vue-router'
import { getgord, PatientList } from '../../api'
// import VirtualList from 'vue3-virtual-list-next'
// Define props if needed
const props = defineProps<{
  v?: any // Replace with actual type if available
}>()
const list = ref(Array.from({ length: 1000 }, (_, i) => `Item ${i}`))
const itemSize = ref(24) // 单个列表项的高度或宽度（像素）
const visibleItemCount = ref(10) // 可视区域内的列表项数量
const loading = ref(false)
const finished = ref(false)
const pagecode = ref(1)
const router = useRouter()
const listData = ref([] as any[])
const gordlist: any = ref([])
const departmentId = ref(Number(router.currentRoute.value.query.departmentId) || 0) // 从路由参数中获取 departmentId

// 查询科室列表
const getgordlist = async () => {
  const { data: res } = await getgord()
  console.log(res)
  gordlist.value = res.result
  departmentId.value = 1 // 设置默认科室ID
  fetchListData() // 获取默认科室的数据
}
getgordlist()

// // 切换科室
// const handletab = (id: any) => {
//   departmentId.value = id // 更新 departmentId
//   // 可以在这里调用函数来获取对应科室的数据
//   listData.value = []
//   pagecode.value = 1
//   fetchListData()
// }

// 获取数据
const fetchListData = async () => {
  loading.value = true // 开始加载更多数据
  const { data: res } = await PatientList({
    departmentId: departmentId.value,
    page: pagecode.value,
    count: 10
  })
  console.log(res)
  if (res.status === '0000') {
    listData.value.push(
      ...res.result.map((item: any) => ({
        sickCircleId: item.sickCircleId,
        userId: item.userId,
        title: item.title,
        detail: item.detail,
        releaseTime: item.releaseTime,
        collectionNum: item.collectionNum,
        commentNum: item.commentNum,
        amount: item.amount
      }))
    )
    pagecode.value++
    finished.value = res.result.length < 10 // 根据返回的数量判断
  } else {
    console.error(res.message)
  }
  loading.value = false // 完成加载更多数据
}

fetchListData()
onMounted(() => {
  // 在组件挂载时，如果 departmentId 已经设置，则获取数据
  if (departmentId.value) {
    fetchListData()
  }
})
const search = () => {
  router.push('./search')
}
// 点击切换数据

const handletab = (id: any) => {
  departmentId.value = id
  // 列表数据
  listData.value = []
  // 当前页面
  pagecode.value = 1
  console.log(departmentId.value)
  fetchListData()
}
const onicon1 = () => {
  router.push('/my')
}

// 跳转详情页
const todetail = (id: any) => {
  console.log(id)
  router.push(`/detail/${id}`)
}
</script>

<style lang="scss">
/* ... */
</style>

<!-- <style lang="scss">
.box {
  width: 100%;
  height: 100%;
  header {
    .h_top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .h_bottom {
      margin-top: 20px;
      height: 40px;
      line-height: 40px;
      border-top: 3px solid #ccc;
      border-bottom: 3px solid #ccc;
      p {
        span {
          display: inline-block;
          margin-left: 35px;
          color: #ccc;
        }
      }
    }
  }
  main {
    overflow: scroll;
    .list {
      width: 100%;
      height: 200px;
      border-bottom: 2px solid #ccc;
      p {
        margin-top: 20px;
        color: #000;
      }
    }
  }
}
.div1 {
  display: flex;
  justify-content: space-between;

  .icon1 {
    font-size: 30px;
    margin: 10px;
  }
}
</style> -->
